<template>
	<view class="default">
		<view class="banner">
			<image src="http://baihang.com.cn/Upload/image/2021122911RPF36Q.jpg" mode="aspectFill"></image>
		</view>
		<view class="dprices">
			<view class="jxprice" v-if="isLogin">￥11.45</view>
			<view class="jxlogin" v-else>￥认证后可见</view>
		</view>
		<view class="dmsg">
			<view class="dmsg-t1">
				<view class="jxtip">厂家直销</view>
				<view class="jxtitle">酒白芍配方颗粒</view>
			</view>
			<view class="jxer">本产品非质量问题不退/换</view>
			<view class="jxspcc">包装规格：每袋装1.33g</view>
		</view>
		<view class="dggs">
			<view>市场价：￥2.15</view>
			<view>库存 ：19200袋 </view>
			<view>销量：25054</view>
		</view>
		<view class="dargs" @click="handleArgs">
			<text>参数:</text>
			<uni-icons type="right" color="#999999" size="16"></uni-icons>
		</view>
		<!-- 参数弹出 -->
		<uni-popup ref="modargs" type="bottom" :zindex="99">
			<view class="modargbox">
				<view class="modarg-tit">商品参数</view>
				<view class="modarg-ls">
					<view class="modarg-ls-item">
						<view>装量</view> <text>2</text>
					</view>
					<view class="modarg-ls-item">
						<view>当量</view> <text>3</text>
					</view>
					<view class="modarg-ls-item">
						<view>产地</view> <text>吉林</text>
					</view>
				</view>
				<view class="modarg-bot">
					<view class="modarg-bot-btn" @click="handleCloseArgs">关 闭</view>
				</view>
			</view>
		</uni-popup>
		<!-- 详细介绍 -->
		<view class="xxjs">
			<view class="xxjs-tit">详细介绍</view>
			<view class="xxjs-info">
				<rich-text :nodes="string"></rich-text>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="tjitit"><text>为您推荐</text></view>
		<view class="prolist">
			<navigator url="/pages/proinfo/proinfo" :open-type="openType" hover-class="none" class="proitem"
				v-for="(item,index) in prolist" :key="index">
				<view class="jximgbox">
					<view class="jxstips">中药配方颗粒</view>
					<image class="jximg" :src="item.img" mode="aspectFit"></image>
				</view>
				<view class="jxinfo">
					<view class="jxtitle">{{item.title}}</view>
					<view class="jxspcc">包装规格：{{item.spcc}}</view>
					<view class="jxprice" v-if="isLogin">￥{{item.price}}</view>
					<view class="jxlogin" v-else>￥认证后可见</view>
					<view class="jxtip">厂家直销</view>
					<view class="jxer">本产品非质量问题不退/换</view>
				</view>
			</navigator>
		</view>
		<!-- 底部 -->
		<view style="height:50px"></view>
		<view class="shopinfo-bottom">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="handleGoodsNavClick"
				@buttonClick="handleGoodsBtnClick" />
		</view>
		<uni-popup ref="modcart" type="bottom" :zindex="50" :mask-click="false">
			<view class="modcartbox">
				<view class="modcart-close" @click="handleCartClose">
					<uni-icons type="closeempty" color="#999999" size="30"></uni-icons>
				</view>
				<view class="modcart-top">
					<image class="modcart-top-l" src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill">
					</image>
					<view class="modcart-top-r">
						<view class="jxtitle">酒白芍配方颗粒</view>
						<view class="jxprice" v-if="isLogin">￥12.56</view>
						<view class="jxlogin" v-else>￥认证后可见</view>
					</view>
				</view>
				<view class="jxspcc modcart-spcc">包装规格：每袋装1.33g</view>
				<view class="modcart-bot">
					<view class="modcart-bot-l">
						<view>数量：</view><text>（500件起购，以50的整数倍下单）</text>
					</view>
					<view class="modcart-bot-r">
						<view class="shopctrl">
							<view class="shopctrl-l" @click="handleReduce">-</view>
							<view class="shopctrl-c"><input disabled class="shopctrl-int" type="text" :value="count" /></view>
							<view class="shopctrl-l" @click="handleIncrease">+</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useCartStore
	} from '@/store/index'
	import {
		useFootmarkStore
	} from '@/store/footmark'
	const cartStore = useCartStore();
	const footStore = useFootmarkStore()

	//是否登录
	const isLogin = ref(false)
	const good = ref({})
	const count = ref(0)
	let obj = {};
	onLoad((options) => {
		// const {
		// 	id
		// } = options;
		//获取产品
		// 	id: 1,
		// 	Titles: '酒白芍配方颗粒酒白芍配方颗粒',
		// 	PicFiles: "http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg",
		// 	Price: 12.12,
		// 	spcc: "每袋装0.83g",
		// 	Minnum: 200,
		// 	Step: 20,
		// 	count: 200,
		good.value = {
			id: 1,
			Titles: '酒白芍配方颗粒酒白芍配方颗粒',
			Class: "中药配方颗粒",
			PicFiles: "http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg",
			Price: 12.12,
			spcc: "每袋装0.83g",
			Minnum: 200,
			Step: 20
		}
		count.value = good.value.Minnum;
		//以下是加入购物车/历史足迹的使用
		// id: 1,
		// Titles: '酒白芍配方颗粒酒白芍配方颗粒',
		// PicFiles: "http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg",
		// Price: 12.12,
		// spcc: "每袋装0.83g",
		// Minnum: 200,
		// Step: 20,
		({
			id: obj.id,
			Class: obj.Class,
			Titles: obj.Titles,
			Price: obj.Price,
			PicFiles: obj.PicFiles,
			spcc: obj.spcc,
			Minnum: obj.Minnum,
			Step: obj.Step,
		} = good.value);
		//加入足迹
		footStore.addFoot(obj)

	})
	//判断页面栈
	const openType = ref("navigate");
	if (getCurrentPages().length >= 9) {
		openType.value = "redirect"
	}
	//参数
	const modargs = ref(null);
	const handleArgs = () => {
		modargs.value.open();
	}
	const handleCloseArgs = () => {
		modargs.value.close();
	}
	//详情
	const string = ref("<p>本品为毛茛科植物芍药 Paeonia lactiflora Pall.的干燥根经炮制并按标准汤剂的主要质量指标加工制成的配方颗粒。</p>")
	//推荐
	const prolist = ref([{
		id: 1,
		title: "矮地茶配方颗粒",
		spcc: "每袋装0.83g",
		img: 'http://baihang.com.cn/Upload/image/2021122911RPF36Q.jpg',
		price: 19.00
	}, {
		id: 2,
		title: "矮地茶配方颗粒",
		spcc: "每袋装0.83g",
		img: 'http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg',
		price: 11.00
	}, {
		id: 3,
		title: "矮地茶配方颗粒",
		spcc: "每袋装0.83g",
		img: 'http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg',
		price: 16.00
	}, {
		id: 4,
		title: "矮地茶配方颗粒",
		spcc: "每袋装0.83g",
		img: 'http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg',
		price: 18.00
	}])
	//购物车部分
	const showCart = ref(false)
	const buttonGroup = [{
			text: '加入购物车',
			backgroundColor: '#089a0f',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: '#b57000',
			color: '#fff'
		}
	]
	const options = ref([{
		icon: 'headphones',
		text: '客服'
	}, {
		icon: 'heart',
		text: '收藏',
		actColor: "#646566"
	}, {
		icon: 'cart',
		text: '购物车',
		info: 0
	}])
	watch(() => cartStore.cartTotalAllCount, (newcount) => {
		options.value[2].info = newcount;
	}, {
		immediate: true
	})
	//购物车加减
	const handleReduce = () => {
		count.value -= good.value.Step;
		if (count.value <= good.value.Minnum) count.value = good.value.Minnum
	}
	const handleIncrease = () => {
		count.value += good.value.Step;
	}
	const isFav = ref(false)
	// 底部商品栏目点击
	const handleGoodsNavClick = (e) => {
		const {
			index
		} = e;
		//收藏
		if (index === 1) {
			console.log("收藏")
			isFav.value = !isFav.value;
			options.value[1].icon = isFav.value ? "heart-filled" : "heart";
			options.value[1].actColor = isFav.value ? "red" : "#646566";
			// options.value[1].text = isFav.value ? "已收藏" : "收藏";
		}
		// 回到购物车
		if (index === 2) {
			uni.switchTab({
				url: '/pages/carts/carts'
			});
		}
	}
	const modcart = ref(null)
	const handleCartClose = () => {
		showCart.value = false;
		modcart.value.close();
	}

	// 底部商品栏目按钮点击
	const handleGoodsBtnClick = (e) => {
		const {
			index
		} = e;
		// 加入购物车
		if (index === 0) {
			if (!showCart.value) {
				showCart.value = true;
				modcart.value.open();
			} else {
				cartStore.changeCartItem({
					good: obj,
					num: count.value
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		image {
			display: block;
			width: 100%;
			height: 560rpx;
		}
	}

	.dprices {
		padding: 20rpx 40rpx;
		border-bottom: 20rpx solid #f3f3f3;
	}

	.dmsg {
		padding: 20rpx 40rpx;
		border-bottom: 20rpx solid #f3f3f3;

		&-t1 {
			display: flex;
			align-items: center;

			.jxtitle {
				margin-left: 20rpx;
				white-space: normal;
			}
		}

		.jxspcc {
			margin-bottom: 0;
		}
	}

	.dggs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: $c9;
		padding: 20rpx 40rpx;
		border-bottom: 20rpx solid #f3f3f3;
	}

	.dargs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: $c9;
		padding: 20rpx 40rpx;
		border-bottom: 20rpx solid #f3f3f3;
	}

	.modargbox {
		background: $cf;
		padding: 20rpx;

		.modarg {
			&-tit {
				padding: 20rpx 0;
			}

			&-ls {
				&-item {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					padding: 20rpx 10rpx;
					border-bottom: 1px solid #e5e5e5;

					view {
						color: $c9;
					}

					text {
						color: $c0;
						margin-left: 40rpx;
					}
				}
			}

			&-bot {
				padding: 20rpx 0;
				margin-top: 20rpx;

				&-btn {
					background: $main-color;
					font-size: 26rpx;
					color: $cf;
					border-radius: 5px;
					padding: 15rpx 0;
					text-align: center;
				}
			}
		}
	}

	// 详细	
	.xxjs {
		padding: 0 20rpx;
		border-bottom: 20rpx solid #f3f3f3;

		&-tit {
			font-size: 32rpx;
			color: $c3;
			font-weight: bold;
			padding: 20rpx;
			border-bottom: 1px solid #dddddd;
		}

		&-info {
			padding: 20rpx;
			font-size: 30rpx;
			color: $c3;
			line-height: 1.7;
		}
	}

	.tjitit {
		padding: 30rpx 0;
		font-size: 32rpx;
		color: $c3;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;

		&::before {
			content: "";
			width: 10rpx;
			height: 16rpx;
			border-radius: 100px;
			background: $red;
			margin-right: 10rpx;
		}
	}

	.prolist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		padding: 0 20rpx;
		padding-bottom: 40rpx;

		.proitem {
			.jximgbox {
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
			}

			.jxinfo {
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
				background: #f3f3f3;
				padding: 20rpx;
				margin-top: -1px;
			}
		}
	}

	.shopinfo-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 66;
		border-top: 1px solid #ccc;
	}

	.modcartbox {
		background: $cf;
		padding: 20rpx;
		padding-bottom: 120rpx;
		position: relative;

		.modcart {
			&-close {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}

			&-top {
				display: flex;
				align-items: center;

				&-l {
					width: 135rpx;
					height: 110rpx;
				}

				&-r {
					margin-left: 30rpx;
				}
			}

			&-spcc {
				padding: 10rpx 0;
			}

			&-bot {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-l {

					view,
					text {
						display: inline-block;
						vertical-align: middle;
						font-size: 26rpx;
						color: $c9;
					}

					text {
						color: #20b3fb;
					}
				}

				&-r {
					flex-shrink: 0;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>